<template>
  <div class="batch-query-page p-4">
    <!-- 页面标题 -->
    <h2 class="page-title mb-4">批次查询</h2>
    
    <!-- 批次查询表单 -->
    <el-card shadow="hover" class="mb-4">
      <el-form :model="searchForm" inline class="mb-4">
        <el-form-item label="货品">
          <el-input v-model="searchForm.goodsName" placeholder="请输入货品名称/编号" style="width: 200px;" />
      </el-form-item>
      <el-form-item label="货品类型">
        <el-select v-model="searchForm.goodsType" placeholder="请选择">
          <el-option label="全部" value="" />
          <el-option label="电子产品" value="electronic" />
          <el-option label="家电" value="homeAppliance" />
          <el-option label="服装" value="clothing" />
          <el-option label="食品" value="food" />
          <el-option label="日用品" value="daily" />
        </el-select>
      </el-form-item>
      <el-form-item label="单位">
        <el-select v-model="searchForm.unit" placeholder="请选择">
          <el-option label="全部" value="" />
          <el-option label="个" value="piece" />
          <el-option label="台" value="unit" />
          <el-option label="件" value="item" />
          <el-option label="包" value="pack" />
          <el-option label="箱" value="box" />
        </el-select>
      </el-form-item>
      <el-form-item label="货品批次">
        <el-input v-model="searchForm.batchNo" placeholder="请输入批次" />
      </el-form-item>
      <el-form-item label="仓库名称">
        <el-select v-model="searchForm.warehouseName" placeholder="请选择">
          <el-option label="全部" value="" />
          <el-option label="货品仓库一" value="warehouse1" />
          <el-option label="货品仓库二" value="warehouse2" />
          <el-option label="临时仓库" value="warehouse3" />
        </el-select>
      </el-form-item>
      <el-form-item label="生产日期">
        <el-date-picker
          v-model="searchForm.produceDate"
          type="date"
          placeholder="请选择"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="到期日期">
        <el-date-picker
          v-model="searchForm.expireDate"
          type="date"
          placeholder="请选择"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
        <el-button type="success" @click="handleExport">导出</el-button>
        <el-button type="info" @click="handleRefresh">刷新</el-button>
      </el-form-item>
    </el-form>
    </el-card>

    <!-- 批次表格 -->
    <el-card shadow="hover">
      <div class="table-header mb-4">
        <span class="table-title">批次数据列表</span>
        <span class="data-count">共 {{ pagination.total }} 条记录</span>
      </div>
      <el-table :data="tableData" border style="width: 100%" stripe>
        <el-table-column type="selection" width="55" />
        <el-table-column prop="index" label="序号" width="50" align="center" />
      <el-table-column prop="goodsCode" label="货品编号" />
      <el-table-column prop="goodsName" label="货品名称">
        <template #default="scope">
          <span class="goods-name">{{ scope.row.goodsName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="goodsType" label="货品类型">
        <template #default="scope">
          <el-tag :type="getTypeTagType(scope.row.goodsType)">
            {{ scope.row.goodsType }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="spec" label="规格型号" />
      <el-table-column prop="unit" label="单位" />
      <el-table-column prop="warehouseName" label="仓库名称" />
      <el-table-column prop="currentStock" label="当前库存">
        <template #default="scope">
          <span :class="{ 'stock-low': scope.row.currentStock < 50 }">
            {{ scope.row.currentStock }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="batchNo" label="批次" />
      <el-table-column prop="produceDate" label="生产日期" />
      <el-table-column prop="expireDate" label="到期日期">
        <template #default="scope">
          <span :class="{ 'expire-soon': isExpireSoon(scope.row.expireDate) }">
            {{ scope.row.expireDate }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleView(scope.row)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="mt-4" style="text-align: right;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      />
    </div>
    </el-card>
    <!-- 批次详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="批次详情"
      width="80%"
      :close-on-click-modal="false"
    >
      <template v-if="currentBatchData">
        <!-- 基本信息 -->
        <el-card shadow="hover" class="mb-4">
          <h3 class="card-title mb-3">基本信息</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="货品名称">{{ currentBatchData.goodsName }}</el-descriptions-item>
            <el-descriptions-item label="货品编号">{{ currentBatchData.goodsCode }}</el-descriptions-item>
            <el-descriptions-item label="货品类型">
              <el-tag :type="getTypeTagType(currentBatchData.goodsType)">
                {{ currentBatchData.goodsType }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="规格型号">{{ currentBatchData.spec }}</el-descriptions-item>
            <el-descriptions-item label="单位">{{ currentBatchData.unit }}</el-descriptions-item>
            <el-descriptions-item label="当前库存" :span="1">
              <span :class="{ 'stock-low': currentBatchData.currentStock < 50 }">
                {{ currentBatchData.currentStock }}
              </span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        
        <!-- 批次信息 -->
        <el-card shadow="hover" class="mb-4">
          <h3 class="card-title mb-3">批次信息</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="批次号">{{ currentBatchData.batchNo }}</el-descriptions-item>
            <el-descriptions-item label="仓库名称">{{ currentBatchData.warehouseName }}</el-descriptions-item>
            <el-descriptions-item label="生产日期">{{ currentBatchData.produceDate }}</el-descriptions-item>
            <el-descriptions-item label="到期日期">
              <span :class="{ 'expire-soon': isExpireSoon(currentBatchData.expireDate) }">
                {{ currentBatchData.expireDate }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="采购价格">¥{{ currentBatchData.purchasePrice.toFixed(2) }}</el-descriptions-item>
            <el-descriptions-item label="销售价格">¥{{ currentBatchData.sellingPrice.toFixed(2) }}</el-descriptions-item>
            <el-descriptions-item label="供应商">{{ currentBatchData.supplier }}</el-descriptions-item>
            <el-descriptions-item label="货位">{{ currentBatchData.shelfLocation }}</el-descriptions-item>
            <el-descriptions-item label="质量状态">{{ currentBatchData.qualityStatus }}</el-descriptions-item>
            <el-descriptions-item label="备注">{{ currentBatchData.remark }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
        
        <!-- 操作流水 -->
        <el-card shadow="hover">
          <h3 class="card-title mb-3">操作流水</h3>
          <el-table :data="batchOperationData" border style="width: 100%" stripe>
            <el-table-column prop="date" label="操作日期" width="120" />
            <el-table-column prop="time" label="操作时间" width="100" />
            <el-table-column prop="operation" label="操作类型" width="100">
              <template #default="scope">
                <el-tag :type="getOperationTagType(scope.row.operation)">
                  {{ scope.row.operation }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="operator" label="操作员" width="100" />
            <el-table-column prop="quantity" label="数量" width="100" align="center">
              <template #default="scope">
                <span :class="{ 'text-green': scope.row.quantity > 0, 'text-red': scope.row.quantity < 0 }">
                  {{ scope.row.quantity > 0 ? '+' : '' }}{{ scope.row.quantity }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" />
          </el-table>
        </el-card>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';

// 查询表单数据（硬编码，无API依赖）
const searchForm = reactive({
  goodsName: '',
  goodsType: '',
  unit: '',
  batchNo: '',
  warehouseName: '',
  produceDate: '',
  expireDate: '',
});

// 完整的批次数据（硬编码，更丰富的数据）
const fullBatchData = ref([
  {
    index: 1,
    goodsCode: 'HP0H6804',
    goodsName: 'iPhone 15 Pro',
    goodsType: '电子产品',
    spec: '256GB/钛金属/原色',
    unit: '台',
    warehouseName: '货品仓库一',
    currentStock: 45,
    batchNo: 'APP20240301-001',
    produceDate: '2024-03-01',
    expireDate: '2027-03-01',
    purchasePrice: 8999,
    sellingPrice: 9999,
    supplier: '苹果供应链',
    shelfLocation: 'A区-01-05',
    qualityStatus: '合格',
    remark: '热销产品'
  },
  {
    index: 2,
    goodsCode: 'HP0H1795',
    goodsName: '三星QN90C 4K量子点电视',
    goodsType: '电子产品',
    spec: '65英寸/4K/智能',
    unit: '台',
    warehouseName: '货品仓库二',
    currentStock: 12,
    batchNo: 'TV20240302-001',
    produceDate: '2024-03-02',
    expireDate: '2028-03-02',
    purchasePrice: 15999,
    sellingPrice: 17999,
    supplier: '三星电子',
    shelfLocation: 'B区-02-03',
    qualityStatus: '合格',
    remark: '高端电视系列'
  },
  {
    index: 3,
    goodsCode: 'HP0H1705',
    goodsName: '德龙全自动咖啡机',
    goodsType: '家电',
    spec: 'ECAM 350.55.B/黑色',
    unit: '台',
    warehouseName: '货品仓库一',
    currentStock: 8,
    batchNo: 'APP20240303-001',
    produceDate: '2024-03-03',
    expireDate: '2027-03-03',
    purchasePrice: 5999,
    sellingPrice: 6999,
    supplier: '德龙电器',
    shelfLocation: 'C区-01-02',
    qualityStatus: '合格',
    remark: '进口咖啡机'
  },
  {
    index: 4,
    goodsCode: 'HP0H6497',
    goodsName: '格力变频空调',
    goodsType: '家电',
    spec: 'KFR-35GW/(35553)FNhAb-B1/1.5匹',
    unit: '台',
    warehouseName: '临时仓库',
    currentStock: 25,
    batchNo: 'AIR20240304-001',
    produceDate: '2024-03-04',
    expireDate: '2028-03-04',
    purchasePrice: 3299,
    sellingPrice: 3699,
    supplier: '格力电器',
    shelfLocation: 'D区-03-01',
    qualityStatus: '合格',
    remark: '节能型空调'
  },
  {
    index: 5,
    goodsCode: 'HP0H4558',
    goodsName: '海尔滚筒洗衣机',
    goodsType: '家电',
    spec: 'XQG100-BD14126L/10kg',
    unit: '台',
    warehouseName: '货品仓库二',
    currentStock: 15,
    batchNo: 'WSH20240305-001',
    produceDate: '2024-03-05',
    expireDate: '2028-03-05',
    purchasePrice: 2999,
    sellingPrice: 3499,
    supplier: '海尔集团',
    shelfLocation: 'E区-02-04',
    qualityStatus: '合格',
    remark: '大容量洗衣机'
  },
  {
    index: 6,
    goodsCode: 'HP0H5232',
    goodsName: 'ThinkPad X1 Carbon',
    goodsType: '电子产品',
    spec: 'i7-1260P/16GB/512GB',
    unit: '台',
    warehouseName: '货品仓库一',
    currentStock: 38,
    batchNo: 'NB20240306-001',
    produceDate: '2024-03-06',
    expireDate: '2027-03-06',
    purchasePrice: 9999,
    sellingPrice: 11999,
    supplier: '联想集团',
    shelfLocation: 'A区-01-03',
    qualityStatus: '合格',
    remark: '商务笔记本'
  },
  {
    index: 7,
    goodsCode: 'HP0H1611',
    goodsName: 'Apple Watch Ultra',
    goodsType: '电子产品',
    spec: '49mm/钛金属/蜂窝版',
    unit: '个',
    warehouseName: '货品仓库一',
    currentStock: 62,
    batchNo: 'WTC20240307-001',
    produceDate: '2024-03-07',
    expireDate: '2026-03-07',
    purchasePrice: 5999,
    sellingPrice: 6299,
    supplier: '苹果供应链',
    shelfLocation: 'F区-01-01',
    qualityStatus: '合格',
    remark: '运动手表系列'
  },
  {
    index: 8,
    goodsCode: 'HP0H1810',
    goodsName: '桃李全麦面包',
    goodsType: '食品',
    spec: '500g/袋',
    unit: '包',
    warehouseName: '货品仓库二',
    currentStock: 120,
    batchNo: 'FOD20240308-001',
    produceDate: '2024-03-25',
    expireDate: '2024-04-01',
    purchasePrice: 12,
    sellingPrice: 15,
    supplier: '桃李食品',
    shelfLocation: 'G区-02-03',
    qualityStatus: '合格',
    remark: '临期食品，加速销售'
  },
  {
    index: 9,
    goodsCode: 'HP0H9174',
    goodsName: '双立人餐具套装',
    goodsType: '日用品',
    spec: '24件套/不锈钢',
    unit: '套',
    warehouseName: '临时仓库',
    currentStock: 12,
    batchNo: 'DLY20240309-001',
    produceDate: '2024-03-09',
    expireDate: '2027-03-09',
    purchasePrice: 1299,
    sellingPrice: 1599,
    supplier: '双立人中国',
    shelfLocation: 'H区-01-02',
    qualityStatus: '合格',
    remark: '赠品套装'
  },
  {
    index: 10,
    goodsCode: 'HP0H5330',
    goodsName: 'Nike Air Max 运动鞋',
    goodsType: '服装',
    spec: '42码/黑色',
    unit: '双',
    warehouseName: '货品仓库一',
    currentStock: 28,
    batchNo: 'CLT20240310-001',
    produceDate: '2024-03-10',
    expireDate: '2025-03-10',
    purchasePrice: 699,
    sellingPrice: 899,
    supplier: 'Nike中国',
    shelfLocation: 'I区-03-04',
    qualityStatus: '合格',
    remark: '热销款式'
  },
  {
    index: 11,
    goodsCode: 'HP0H2345',
    goodsName: '小米14 Pro',
    goodsType: '电子产品',
    spec: '16GB/512GB/钛合金',
    unit: '台',
    warehouseName: '货品仓库一',
    currentStock: 56,
    batchNo: 'XIA20240311-001',
    produceDate: '2024-03-11',
    expireDate: '2027-03-11',
    purchasePrice: 4999,
    sellingPrice: 5699,
    supplier: '小米科技',
    shelfLocation: 'A区-02-05',
    qualityStatus: '合格',
    remark: '新品上市'
  },
  {
    index: 12,
    goodsCode: 'HP0H3456',
    goodsName: '美的微波炉',
    goodsType: '家电',
    spec: 'M3-L239C/23L',
    unit: '台',
    warehouseName: '货品仓库二',
    currentStock: 42,
    batchNo: 'MED20240312-001',
    produceDate: '2024-03-12',
    expireDate: '2027-03-12',
    purchasePrice: 799,
    sellingPrice: 999,
    supplier: '美的集团',
    shelfLocation: 'C区-03-01',
    qualityStatus: '合格',
    remark: '促销商品'
  },
  {
    index: 13,
    goodsCode: 'HP0H4567',
    goodsName: '康师傅红烧牛肉面',
    goodsType: '食品',
    spec: '12桶/箱',
    unit: '箱',
    warehouseName: '货品仓库二',
    currentStock: 89,
    batchNo: 'INS20240313-001',
    produceDate: '2024-03-15',
    expireDate: '2024-09-15',
    purchasePrice: 48,
    sellingPrice: 59.9,
    supplier: '康师傅控股',
    shelfLocation: 'G区-01-04',
    qualityStatus: '合格',
    remark: '速食产品'
  },
  {
    index: 14,
    goodsCode: 'HP0H5678',
    goodsName: '潘婷洗发水',
    goodsType: '日用品',
    spec: '750ml/去屑型',
    unit: '瓶',
    warehouseName: '临时仓库',
    currentStock: 156,
    batchNo: 'PNT20240314-001',
    produceDate: '2024-02-20',
    expireDate: '2025-02-20',
    purchasePrice: 38,
    sellingPrice: 49.9,
    supplier: '宝洁公司',
    shelfLocation: 'H区-02-01',
    qualityStatus: '合格',
    remark: '大批量采购'
  },
  {
    index: 15,
    goodsCode: 'HP0H6789',
    goodsName: 'Adidas运动裤',
    goodsType: '服装',
    spec: 'L码/蓝色',
    unit: '条',
    warehouseName: '货品仓库一',
    currentStock: 33,
    batchNo: 'ADI20240315-001',
    produceDate: '2024-03-15',
    expireDate: '2025-03-15',
    purchasePrice: 199,
    sellingPrice: 299,
    supplier: 'Adidas中国',
    shelfLocation: 'I区-01-03',
    qualityStatus: '合格',
    remark: '春夏季新品'
  },
  {
    index: 16,
    goodsCode: 'HP0H7890',
    goodsName: '华为MateBook X Pro',
    goodsType: '电子产品',
    spec: 'i7/16GB/1TB/灰色',
    unit: '台',
    warehouseName: '货品仓库一',
    currentStock: 24,
    batchNo: 'HUA20240316-001',
    produceDate: '2024-03-16',
    expireDate: '2027-03-16',
    purchasePrice: 8999,
    sellingPrice: 9999,
    supplier: '华为技术',
    shelfLocation: 'A区-01-01',
    qualityStatus: '合格',
    remark: '高端商务本'
  },
  {
    index: 17,
    goodsCode: 'HP0H8901',
    goodsName: '苏泊尔电饭煲',
    goodsType: '家电',
    spec: 'CFXB40FC8633Q/4L',
    unit: '个',
    warehouseName: '货品仓库二',
    currentStock: 67,
    batchNo: 'SUP20240317-001',
    produceDate: '2024-03-17',
    expireDate: '2027-03-17',
    purchasePrice: 399,
    sellingPrice: 499,
    supplier: '苏泊尔集团',
    shelfLocation: 'C区-02-02',
    qualityStatus: '合格',
    remark: '热销家电'
  },
  {
    index: 18,
    goodsCode: 'HP0H9012',
    goodsName: '三只松鼠坚果礼盒',
    goodsType: '食品',
    spec: '1.5kg/盒',
    unit: '盒',
    warehouseName: '货品仓库二',
    currentStock: 54,
    batchNo: 'SQS20240318-001',
    produceDate: '2024-03-18',
    expireDate: '2024-09-18',
    purchasePrice: 99,
    sellingPrice: 139,
    supplier: '三只松鼠',
    shelfLocation: 'G区-03-05',
    qualityStatus: '合格',
    remark: '礼盒装产品'
  },
  {
    index: 19,
    goodsCode: 'HP0H0123',
    goodsName: '清风抽纸',
    goodsType: '日用品',
    spec: '3层100抽*24包',
    unit: '箱',
    warehouseName: '临时仓库',
    currentStock: 203,
    batchNo: 'QFF20240319-001',
    produceDate: '2024-02-28',
    expireDate: '2025-02-28',
    purchasePrice: 89,
    sellingPrice: 109,
    supplier: '金红叶纸业',
    shelfLocation: 'H区-03-03',
    qualityStatus: '合格',
    remark: '消耗品，常备库存'
  },
  {
    index: 20,
    goodsCode: 'HP0H1234',
    goodsName: '安踏运动外套',
    goodsType: '服装',
    spec: 'XL码/黑色',
    unit: '件',
    warehouseName: '货品仓库一',
    currentStock: 41,
    batchNo: 'ANT20240320-001',
    produceDate: '2024-03-20',
    expireDate: '2025-03-20',
    purchasePrice: 239,
    sellingPrice: 359,
    supplier: '安踏体育',
    shelfLocation: 'I区-02-01',
    qualityStatus: '合格',
    remark: '春季新款'
  },
  {
    index: 21,
    goodsCode: 'HP0H2345',
    goodsName: 'iPad Air 5',
    goodsType: '电子产品',
    spec: '256GB/WiFi/深空灰色',
    unit: '台',
    warehouseName: '货品仓库一',
    currentStock: 37,
    batchNo: 'IPD20240321-001',
    produceDate: '2024-03-21',
    expireDate: '2027-03-21',
    purchasePrice: 4799,
    sellingPrice: 5299,
    supplier: '苹果供应链',
    shelfLocation: 'A区-02-03',
    qualityStatus: '合格',
    remark: '平板设备'
  },
  {
    index: 22,
    goodsCode: 'HP0H3456',
    goodsName: 'TCL冰箱',
    goodsType: '家电',
    spec: 'BCD-510WEPZ50/对开门',
    unit: '台',
    warehouseName: '货品仓库二',
    currentStock: 19,
    batchNo: 'TCL20240322-001',
    produceDate: '2024-03-22',
    expireDate: '2028-03-22',
    purchasePrice: 3999,
    sellingPrice: 4599,
    supplier: 'TCL集团',
    shelfLocation: 'D区-01-02',
    qualityStatus: '合格',
    remark: '大容量冰箱'
  },
  {
    index: 23,
    goodsCode: 'HP0H4567',
    goodsName: '达利园蛋黄派',
    goodsType: '食品',
    spec: '500g/袋',
    unit: '包',
    warehouseName: '货品仓库二',
    currentStock: 145,
    batchNo: 'DLY20240323-001',
    produceDate: '2024-03-23',
    expireDate: '2024-06-23',
    purchasePrice: 15,
    sellingPrice: 19.9,
    supplier: '达利食品',
    shelfLocation: 'G区-01-02',
    qualityStatus: '合格',
    remark: '点心零食'
  },
  {
    index: 24,
    goodsCode: 'HP0H5678',
    goodsName: '海飞丝洗发水',
    goodsType: '日用品',
    spec: '500ml/清爽控油',
    unit: '瓶',
    warehouseName: '临时仓库',
    currentStock: 178,
    batchNo: 'HFS20240324-001',
    produceDate: '2024-02-15',
    expireDate: '2025-02-15',
    purchasePrice: 28,
    sellingPrice: 39.9,
    supplier: '宝洁公司',
    shelfLocation: 'H区-01-04',
    qualityStatus: '合格',
    remark: '促销装'
  },
  {
    index: 25,
    goodsCode: 'HP0H6789',
    goodsName: '李宁运动鞋',
    goodsType: '服装',
    spec: '43码/白色',
    unit: '双',
    warehouseName: '货品仓库一',
    currentStock: 32,
    batchNo: 'LIG20240325-001',
    produceDate: '2024-03-25',
    expireDate: '2025-03-25',
    purchasePrice: 399,
    sellingPrice: 559,
    supplier: '李宁体育',
    shelfLocation: 'I区-03-02',
    qualityStatus: '合格',
    remark: '限量版'
  },
  {
    index: 26,
    goodsCode: 'HP0H7890',
    goodsName: '索尼WH-1000XM5耳机',
    goodsType: '电子产品',
    spec: '黑色/无线降噪',
    unit: '副',
    warehouseName: '货品仓库一',
    currentStock: 28,
    batchNo: 'SON20240326-001',
    produceDate: '2024-03-26',
    expireDate: '2027-03-26',
    purchasePrice: 2499,
    sellingPrice: 2999,
    supplier: '索尼电子',
    shelfLocation: 'A区-01-04',
    qualityStatus: '合格',
    remark: '高端耳机'
  },
  {
    index: 27,
    goodsCode: 'HP0H8901',
    goodsName: '格兰仕烤箱',
    goodsType: '家电',
    spec: 'KWS1530X-H7R/30L',
    unit: '台',
    warehouseName: '货品仓库二',
    currentStock: 45,
    batchNo: 'GAL20240327-001',
    produceDate: '2024-03-27',
    expireDate: '2027-03-27',
    purchasePrice: 599,
    sellingPrice: 799,
    supplier: '格兰仕集团',
    shelfLocation: 'C区-03-03',
    qualityStatus: '合格',
    remark: '烘焙工具'
  },
  {
    index: 28,
    goodsCode: 'HP0H9012',
    goodsName: '好丽友派',
    goodsType: '食品',
    spec: '20枚/盒',
    unit: '盒',
    warehouseName: '货品仓库二',
    currentStock: 167,
    batchNo: 'ORI20240328-001',
    produceDate: '2024-03-28',
    expireDate: '2024-06-28',
    purchasePrice: 25,
    sellingPrice: 32.8,
    supplier: '好丽友食品',
    shelfLocation: 'G区-02-04',
    qualityStatus: '合格',
    remark: '休闲零食'
  },
  {
    index: 29,
    goodsCode: 'HP0H0123',
    goodsName: '飘柔洗发水',
    goodsType: '日用品',
    spec: '400ml/柔顺滋养',
    unit: '瓶',
    warehouseName: '临时仓库',
    currentStock: 210,
    batchNo: 'PRC20240329-001',
    produceDate: '2024-02-25',
    expireDate: '2025-02-25',
    purchasePrice: 18,
    sellingPrice: 25.9,
    supplier: '宝洁公司',
    shelfLocation: 'H区-02-02',
    qualityStatus: '合格',
    remark: '大众消费品'
  },
  {
    index: 30,
    goodsCode: 'HP0H1234',
    goodsName: '优衣库T恤',
    goodsType: '服装',
    spec: 'M码/白色',
    unit: '件',
    warehouseName: '货品仓库一',
    currentStock: 89,
    batchNo: 'UNQ20240330-001',
    produceDate: '2024-03-30',
    expireDate: '2025-03-30',
    purchasePrice: 59,
    sellingPrice: 79,
    supplier: '优衣库',
    shelfLocation: 'I区-01-05',
    qualityStatus: '合格',
    remark: '基础款'
  }
]);

// 表格数据（根据分页和筛选条件动态更新）
const tableData = ref([]);

// 筛选后的数据
const filteredData = ref([]);

// 分页参数
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});

// 详情对话框
const detailDialogVisible = ref(false);
const currentBatchData = ref(null);

// 批次操作流水数据
const batchOperationData = ref([]);

// 更新分页数据
const updatePagedData = () => {
  const start = (pagination.currentPage - 1) * pagination.pageSize;
  const end = start + pagination.pageSize;
  tableData.value = filteredData.value.slice(start, end).map((item, index) => ({
    ...item,
    index: start + index + 1
  }));
  pagination.total = filteredData.value.length;
};

// 初始化数据
const initData = () => {
  // 复制完整数据以避免直接修改原始数据
  filteredData.value = JSON.parse(JSON.stringify(fullBatchData.value));
  updatePagedData();
};

// 初始化时加载数据
initData();

// 获取类型标签颜色
const getTypeTagType = (type) => {
  const typeMap = {
    '电子产品': 'primary',
    '家电': 'success',
    '服装': 'warning',
    '食品': 'danger',
    '日用品': 'info'
  };
  return typeMap[type] || 'default';
};

// 检查是否即将过期（30天内）
const isExpireSoon = (expireDate) => {
  const now = new Date();
  const expire = new Date(expireDate);
  const diffDays = Math.ceil((expire - now) / (1000 * 60 * 60 * 24));
  return diffDays > 0 && diffDays <= 30;
};

// 获取操作类型标签颜色
const getOperationTagType = (operation) => {
  const typeMap = {
    '入库': 'success',
    '出库': 'danger',
    '盘点': 'warning',
    '调拨': 'primary',
    '质检': 'info'
  };
  return typeMap[operation] || 'default';
};

// 应用筛选条件
const applyFilters = () => {
  // 重置到第一页
  pagination.currentPage = 1;
  
  // 从完整数据开始筛选
  filteredData.value = JSON.parse(JSON.stringify(fullBatchData.value));
  
  // 应用各筛选条件
  if (searchForm.goodsName) {
    const keyword = searchForm.goodsName.toLowerCase();
    filteredData.value = filteredData.value.filter(item => 
      item.goodsName.toLowerCase().includes(keyword) || 
      item.goodsCode.toLowerCase().includes(keyword)
    );
  }
  
  if (searchForm.goodsType) {
    filteredData.value = filteredData.value.filter(item => 
      item.goodsType === searchForm.goodsType
    );
  }
  
  if (searchForm.unit) {
    filteredData.value = filteredData.value.filter(item => 
      item.unit === searchForm.unit
    );
  }
  
  if (searchForm.batchNo) {
    filteredData.value = filteredData.value.filter(item => 
      item.batchNo.includes(searchForm.batchNo)
    );
  }
  
  if (searchForm.warehouseName) {
    filteredData.value = filteredData.value.filter(item => 
      item.warehouseName === searchForm.warehouseName
    );
  }
  
  if (searchForm.produceDate) {
    filteredData.value = filteredData.value.filter(item => 
      item.produceDate >= searchForm.produceDate
    );
  }
  
  if (searchForm.expireDate) {
    filteredData.value = filteredData.value.filter(item => 
      item.expireDate <= searchForm.expireDate
    );
  }
  
  // 更新分页数据
  updatePagedData();
};

// 查询逻辑（真实数据筛选）
const handleSearch = () => {
  console.log('批次查询条件：', searchForm);
  
  // 模拟查询延迟和加载状态
  const loading = ElLoading.service({
    lock: true,
    text: '正在查询数据...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  
  // 模拟查询延迟
  setTimeout(() => {
    applyFilters();
    loading.close();
    console.log('查询成功，显示结果');
    ElMessage.success(`查询成功，共${pagination.total}条记录`);
  }, 500);
};

// 重置逻辑
const handleReset = () => {
  searchForm.goodsName = '';
  searchForm.goodsType = '';
  searchForm.unit = '';
  searchForm.batchNo = '';
  searchForm.warehouseName = '';
  searchForm.produceDate = '';
  searchForm.expireDate = '';
  
  // 重新加载数据
  const loading = ElLoading.service({
    lock: true,
    text: '正在重置数据...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  
  setTimeout(() => {
    initData();
    loading.close();
    ElMessage.success('已重置查询条件');
  }, 300);
};

// 导出逻辑（模拟真实导出操作）
const handleExport = () => {
  console.log('导出批次数据');
  ElMessage.info('数据导出中，请稍候...');
  // 模拟导出延迟
  setTimeout(() => {
    ElMessage.success('数据导出成功！');
  }, 1000);
};

// 刷新逻辑（模拟真实刷新操作）
const handleRefresh = () => {
  console.log('刷新批次页面');
  // 模拟刷新延迟和加载状态
  const loading = ElLoading.service({
    lock: true,
    text: '正在刷新数据...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  
  // 模拟刷新延迟
  setTimeout(() => {
    initData();
    // 如果有筛选条件，重新应用
    if (Object.values(searchForm).some(val => val)) {
      applyFilters();
    }
    loading.close();
    console.log('刷新成功');
    ElMessage.success('数据刷新成功！');
  }, 800);
};

// 生成模拟的批次操作流水数据
const generateBatchOperationData = (batchData) => {
  const operations = ['入库', '出库', '盘点', '调拨', '质检'];
  const operators = ['操作员1', '操作员2', '操作员3', '操作员4', '操作员5'];
  const data = [];
  
  // 生成最近60天的操作记录
  for (let i = 0; i < 20; i++) {
    const date = new Date();
    date.setDate(date.getDate() - Math.floor(Math.random() * 60));
    
    const operation = operations[Math.floor(Math.random() * operations.length)];
    let quantity = Math.floor(Math.random() * 50) + 1;
    if (operation === '出库' || operation === '调拨') {
      quantity = -quantity;
    }
    
    data.push({
      id: `op-${i}`,
      date: date.toLocaleDateString(),
      time: `${Math.floor(Math.random() * 24)}:${String(Math.floor(Math.random() * 60)).padStart(2, '0')}:${String(Math.floor(Math.random() * 60)).padStart(2, '0')}`,
      operation,
      operator: operators[Math.floor(Math.random() * operators.length)],
      quantity,
      remark: `${operation}操作备注`
    });
  }
  
  // 按时间降序排序
  return data.sort((a, b) => {
    const dateA = new Date(`${a.date} ${a.time}`);
    const dateB = new Date(`${b.date} ${b.time}`);
    return dateB - dateA;
  });
};

// 查看详情逻辑
const handleView = (row) => {
  console.log('查看批次详情：', row);
  currentBatchData.value = row;
  batchOperationData.value = generateBatchOperationData(row);
  detailDialogVisible.value = true;
};

// 分页逻辑（真实分页操作）
const handleSizeChange = (val) => {
  pagination.pageSize = val;
  console.log('批次每页条数变更：', val);
  // 更新分页数据
  updatePagedData();
  
  // 模拟加载状态
  const loading = ElLoading.service({
    lock: true,
    text: '正在加载数据...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  
  // 模拟加载延迟
  setTimeout(() => {
    loading.close();
  }, 300);
};

const handleCurrentChange = (val) => {
  pagination.currentPage = val;
  console.log('批次当前页码变更：', val);
  // 更新分页数据
  updatePagedData();
  
  // 模拟加载状态
  const loading = ElLoading.service({
    lock: true,
    text: '正在加载数据...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  
  // 模拟加载延迟
  setTimeout(() => {
    loading.close();
  }, 300);
};
</script>

<style scoped>
.batch-query-page {
  padding: 16px;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

.table-title {
  font-size: 16px;
  font-weight: 500;
  color: #606266;
}

.data-count {
  font-size: 14px;
  color: #909399;
}

.goods-name {
  color: #409EFF;
  cursor: pointer;
}

.goods-name:hover {
  text-decoration: underline;
}

.stock-low {
  color: #f56c6c;
  font-weight: 500;
}

.expire-soon {
  color: #e6a23c;
  font-weight: 500;
}

.text-green {
  color: #67c23a;
  font-weight: 500;
}

.text-red {
  color: #f56c6c;
  font-weight: 500;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
}

.el-table {
  margin-bottom: 16px;
}

.el-form-item {
  margin-bottom: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .el-form--inline .el-form-item {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  
  .el-form-item__label {
    width: 100%;
    margin-right: 0;
    margin-bottom: 8px;
  }
}
</style>